<template>
  <div>
    我是事件总线组件{{id}}
  </div>
</template>

<script>
export default {
  props: {
    id: {
      type: Number
    }
  },
  created () {
    // 这种写法就是每次只有一个组件在监听事件总线
    // this.$EventBus.$on("event1", (msg) => { // 如果是这个，就算组件销毁，这个事件也是没有注销。这个理论上是不对的
    // this.$EventBus.$off("event1").$on("event1", (msg) => { // 旧的组件将不在监听，只有新的组件能监听
    this.$EventBus.$on("event1", (msg) => { // 这个可以配合beforeDestroy使用。旧的组件能监听，新的组件也能监听
      console.log(`我是组件${this.id}, 收到msg: ${msg}`)
    })
  },
  beforeDestroy () {
    // 这个可以在关闭页面后销毁事件
    this.$EventBus.$off("event1")
  }
}
</script>

<style>
</style>